<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1"></div>
		hello
	</body>
</html>

<style type="text/css">
	.box1{
		width: 200px;
		height: 200px;
		background-color: #f2f2f2;
		/* box-shadow设置元素阴影效果，不会影响布局 */
		/* 水平偏移量 垂直偏移量 阴影模糊半径 阴影颜色*/
		box-shadow:10px 10px 10px rgba(0,0,0,0.5);
		
		border-top-left-radius: 5px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 20px;

	}
	.box1:hover{
		/* outline设置轮廓线，用法和border一样,但是不会影响布局*/
		outline: 10px solid #FF0000;
	}
</style>
